<template>
	<view class="content">
		<view class="dingbu">
			<view class="status_bar">
			 </view>
			<uni-nav-bar left-icon="arrowleft"   title="充值" right-text="充值明细" @clickLeft="back()" @clickRight="detail()"></uni-nav-bar>
		</view>
		<view class="yue">
			<view class="yuee">
				<view class="yueee">余额：{{info.money}}</view>
				<image src="../../../static/gold.png" mode=""></image>
			</view>
			<!-- <view class="tixian" @click="tixian()">提现</view> -->
			<view class="yue_title">充值如遇到问题，可联系代理解决！</view>
		</view>
		
		<!-- <view class="chong_item" v-if="info.level == 1"> -->
		<view class="chong_item" >
			<view class="chong_top">
				<image class="tubiao" src="../../../static/dai.png" mode=""></image>
				<view class="chong_title">
					代理直充
				</view>
				<view class="chong_ma">
					代理微信/QQ二维码
				</view>
			</view>
			<view class="chong_btm">
				<view class="chong_er">
					<image :src="er.image" mode="" @click="previewImg(er.image)"></image>
				</view>
				<view class="chong_right">
					<view class="chong_save" @click="baocun()">
						保存到相册
					</view>
					<view class="chong_save1">
						添加好友进行充值
					</view>
				</view>
			</view>
		</view>
		
		<view class="chong_item">
			<view class="chong_top">
				<image class="tubiao" src="../../../static/wx.png" mode=""></image>
				<view class="chong_title">
					微信充值
				</view>
				<view class="chong_ma">
					扫描二维码付款充值
				</view>
			</view>
			<view class="chong_btm">
				<view class="chong_er">
					<image :src="er.wx_image" mode="" @click="previewImg(er.wx_image)"></image>
				</view>
				<view class="chong_right">
					<view class="chong_save" @click="baocunwx()">
						保存到相册
					</view>
					<view class="chong_save1">
						微信收款码
					</view>
				</view>
			</view>
		</view>
		
		<view class="chong_item">
			<view class="chong_top">
				<image class="tubiao" src="../../../static/alipay.png" mode=""></image>
				<view class="chong_title">
					支付宝充值
				</view>
				<view class="chong_ma">
					扫描二维码付款充值
				</view>
			</view>
			<view class="chong_btm">
				<view class="chong_er">
					<image :src="er.zfb_image" mode="" @click="previewImg(er.zfb_image)"></image>
				</view>
				<view class="chong_right">
					<view class="chong_save" @click="baocunzfb()">
						保存到相册
					</view>
					<view class="chong_save1">
						支付宝收款码
					</view>
				</view>
			</view>
		</view>
	
		<view class="tijiao">
			<view class="tijiao_t">
				<view class="tijiao_cc">
					<text>充值金额：</text>
					<input type="number" value="" v-model="jine"/>
				</view>
				<view class="tijiao_cc">
					<text>充值方式：</text>
					<view class="xuanze">
						<xfl-select
							:list="tabTitle"
							:clearable="false"
							:showItemNum="2"
							:listShow="false"
							:isCanInput="false"
							:style_Container="listBoxStyle"
							:placeholder="'placeholder'"
							:initValue="way"
							:selectHideType="'independent'"
							@change="change"
						></xfl-select>
					</view>
				</view>
			</view>
			<view class="tijiao_c">
				<view class="">支付凭证：</view>
				<view class="tijiao_pic" @click="upimg()">
					<image :src="pic" mode="" v-if="picimg == ''"></image>
					<image class="shang" :src="picimg" mode="" v-else></image>
				</view>
			</view>
			<view class="tijiao_b" @click="go()">提交</view>
		</view>
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
import xflSelect from '@/components/xfl-select/xfl-select.vue';
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {	
		components: {uniNavBar},
		data() {
			return {
				info:'',
				pic:'../../../static/up.png',
				picimg:'',
				listBoxStyle: `height: 40px; font-size: 24rpx;`,
				tabTitle: ['代理','微信','支付宝'],
				// list:[{name:'微信',id:1},{name:'支付宝',id:2}],
				path:'../../../static/up.png',
				way:'微信',
				active:2,
				er:'',//二维码
				jine:'',//金额
				ajax:''
			}
		},
		onLoad() {
			// this.userinfo()	
			this.erweima()
			this.ajax = getdata.imgUrl
		},
		onShow(){
			this.userinfo()	
		},
		methods: {
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray,
					// longPressActions: {
					// 	itemList: ['保存图片'],
					// 	success: function(data) {
							
					// 	},
					// 	fail: function(err) {
							
					// 	}
					// }
				});
			},
			upimg(){
				var _this = this
				var token = uni.getStorageSync('token')
				uni.chooseImage({
					count: 1, //默认9
					success: function (res) {
						uni.showLoading({
						    title: '上传中'
						});
					uni.uploadFile({
						url: getdata.websiteUrl+'/common/upload', 
						header:{'content-type': "application/x-www-form-urlencoded",token:token},
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							'user': 'test' 
						},
						success: (res1) => {
							uni.hideLoading({
								title: '上传成功'
							});
							_this.picimg= JSON.parse(res1.data).data.fullurl
						},
						fail: (res2) =>{
							getdata.shou('服务器断开链接')
							uni.hideLoading();
							
						}
					});
					}
				});
			},
			getUrl(url){
				if (url[0] == '/') {
					return this.ajax + url;
				} else {
					return url;
				}
			},
			erweima(){
				//获取二维码
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/agency',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						uni.hideLoading();
						if(res.data.code == 1){
							_this.er = res.data.data[0]
							_this.er.image = _this.getUrl(_this.er.image)
							_this.er.wx_image = _this.getUrl(_this.er.wx_image)
							_this.er.zfb_image = _this.getUrl(_this.er.zfb_image)
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						uni.hideLoading();
						// console.log(res,'11111')
						getdata.shou('服务器断开链接')
					}
				});
			},
			userinfo(){
				//获取用户信息
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						console.log('用户信息',res)
						uni.hideLoading();
						if(res.data.code == 1){
							_this.info = res.data.data
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						uni.hideLoading();
						// console.log(res,'11111')
						getdata.shou('服务器断开链接')
					}
				});
			},
			go(){
				//提交充值
				var _this = this
				if(_this.jine == ''){
					getdata.shou('请输入充值金额')
				}else if(_this.picimg == ''){
					getdata.shou('请上传支付凭证')
				}else{
					uni.showLoading({
					    title: '加载中'
					});
					var data = {
						amount:_this.jine,
						type:_this.active,
						memo:_this.picimg
					}
					console.log(data,'数据')
					var token = uni.getStorageSync('token')
					uni.request({
						url: getdata.websiteUrl + '/user/recharge',
						header:{'content-type': "application/x-www-form-urlencoded",token:token},
						dataType: 'json',
						method: 'POST',
						data:data,
						success: res => {
							console.log('充值',res)
							uni.hideLoading();
							if(res.data.code == 1){
								getdata.shou(res.data.msg)
								setTimeout(function(){
									uni.navigateBack(); 
								},1500)
							}else{
								getdata.shou(res.data.msg)
							}
							
						},
						fail: res => {
							uni.hideLoading();
							// console.log(res,'11111')
							getdata.shou('服务器断开链接')
						}
					});
				}
				
			},
			back(){
				uni.navigateBack();
		    },
			detail(){
				uni.navigateTo({
					url: 'chongdetail/chongdetail'
				});
			},
			tixian(){
				  uni.navigateTo({
					  url: 'tixian/tixian'
				  });
			},
			baocun(){
				  var _this = this
				  console.log(_this.er.image)
				  if(_this.er.image == '' ||_this.er.image == undefined ||_this.er.image == null ){
					   getdata.shou('没有可保存的图片')
				  }else{
					  uni.saveImageToPhotosAlbum({
						filePath: _this.er.image,
						success: function(res) {
							uni.showToast({
								title: '保存相册成功'
							});
						},
						fail: err => {
							uni.showToast({
								title: '保存相册失败'
							});
						}
					  });
				  }
			},
			baocunwx(){
				  var _this = this
				  if(_this.er.wx_image == '' ||_this.er.wx_image == undefined ||_this.er.wx_image == null ){
				  		getdata.shou('没有可保存的图片')
				  }else{
				  	uni.saveImageToPhotosAlbum({
						filePath: _this.er.wx_image,
						success: function(res) {
							uni.showToast({
								title: '保存相册成功'
							});
						},
						fail: err => {
							uni.showToast({
								title: '保存相册失败'
							});
						}
				  	});
				  }
			},
			baocunzfb(){
				  var _this = this
				  if(_this.er.zfb_image == '' ||_this.er.zfb_image == undefined ||_this.er.zfb_image == null ){
					getdata.shou('没有可保存的图片')
				  }else{
				  	uni.saveImageToPhotosAlbum({
						filePath: _this.er.zfb_image,
						success: function(res) {
							uni.showToast({
								title: '保存相册成功'
							});
						},
						fail: err => {
							uni.showToast({
								title: '保存相册失败'
							});
						}
				  	});
				  }
			},
			change({ newVal, oldVal, index, orignItem }) {
				this.active = index + 1
				console.log(this.active,index, orignItem)
			},
		}
	}
</script>

<style lang="scss">
@import '../../../static/iconfont/iconfont.css';
.dingbu{
	position: fixed;
	left:0;
	top:0;
	z-index: 999;
	background-color: #FFFFFF;
}
.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }	
.uni-navbar--border{
	// border: none !important;
	border-bottom: 2rpx solid #F1F1F1;
}	
.uni-nav-bar-text{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.yue{
	width: 690rpx;
	height: 258rpx;
	background: url(../../../static/moneybg.png) no-repeat;
	background-size:100% 100%;
	border-radius: 50rpx;
	margin: 30rpx auto 95rpx;
	margin-top: calc(var(--status-bar-height) + 140rpx);
	.yuee{
		display: flex;
		padding-top: 60rpx;
		margin-left: 70rpx;
		.yueee{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 36rpx;
			text-shadow: 0px 3rpx 15rpx rgba(189, 31, 72, 0.81);
		}
		image{
			width: 54rpx;
			height: 42rpx;
			margin-left: 20rpx;
		}
	}
	.tixian{
		width: 150rpx;
		height: 74rpx;
		line-height: 74rpx;
		background: #FFFFFF;
		border-radius: 37rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #333333;
		text-align: center;
		margin: 60rpx auto 0;
	}
}
.chong_item{
	box-sizing: border-box;
	padding-left: 50rpx;
	padding-right: 30rpx;
	padding-bottom: 50rpx;
	.chong_top{
		width: 100%;
		height: 40rpx;
		display: flex;
		align-items: center;
		.tubiao{
			width: 40rpx;
			height: 40rpx;
		}
		.chong_title{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 34rpx;
		}
		.chong_ma{
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #999999;
			margin-left: auto;
		}
	}
	.chong_btm{
		display: flex;
		margin-top: 40rpx;
		.chong_er{
			width: 184rpx;
			height: 184rpx;
			margin-left: 75rpx;
			image{
				width: 184rpx;
				height: 184rpx;
			}
		}
		.chong_right{
			margin-top: 40rpx;
			margin-left: 110rpx;
			text-align: center;
			.chong_save{
				width: 170rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #1578F2;
				border-radius: 30rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				text-align: center;
				
			}
			.chong_save1{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #333333;
				margin-top: 25rpx;
				text-align: center;
			}
		}
	}
}
.tijiao{
	margin-top: 70rpx;
	box-sizing: border-box;
	padding-left: 50rpx;
	padding-right: 30rpx;
	.tijiao_t{
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		.tijiao_cc{
			display: flex;
			align-items: center;
		}
		input{
			width: 180rpx;
			height: 70rpx;
			background: #F4F5F7;
			font-weight: normal;
		}
	}
	.tijiao_c{
		display: flex;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 50rpx;
		.tijiao_pic{
			width: 426rpx;
			height: 246rpx;
			background: #F4F5F7;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			image{
				width: 45rpx;
				height: 45rpx;
			}
			.shang{
				width: 426rpx;
				height: 246rpx;
				border-radius: 10rpx;
			}
		}
		
	}
	.tijiao_b{
		width: 360rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #1578F2;
		border-radius: 44rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		text-align: center;
		margin: 80rpx auto;

	}
}
.xuanze {
	width: 180rpx;
	height: 70rpx;
	background: #F4F5F7;
	font-weight: normal;
	
	.show-box{
		border: none !important;
		background: #F4F5F7 !important;
		width: 180rpx !important;
		height: 70rpx !important;
	}
}
.yue_title{
	font-size: 28rpx;
	color: #FFFFFF;
	text-align: center;
	margin-top: 80rpx;
	font-weight: bold;
}
</style>
